<template>
	<view class="container">
		<view class="ttitle">个人信息</view>
		<view class="ttxt">完善您的个人信息，可以进行更好的使用体验奥~</view>
		<view class="userimgbox">
			<view class="userimg"><uni-file-picker limit="1" :del-icon="false" disable-preview
					:imageStyles="imageStyles" file-mediatype="image" @select="select">
					<image :src="avatar"></image>
				</uni-file-picker></view>
		</view>
		<view class="form">
			<view class="form_dl">
				<view class="form_dt">昵称</view>
				<view class="form_dd"><input class="inp" type="text" @input="inickname" :value="nickname"
						placeholder="昵称" /></view>
			</view>
			<!--<view class="form_dl">
				<view class="form_dt">手机号</view>
				<view class="form_dd"><input class="inp" type="text" placeholder="13600000000" /></view>
			</view>-->
			<view class="form_dl">
				<view class="form_dt">性别</view>
				<view class="form_dd">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="picker">{{array[index]}}<text></text></view>
					</picker>
				</view>
			</view>
			<view class="form_dl">
				<view class="form_dt">生日</view>
				<view class="form_dd">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="picker">{{date}}<text></text></view>
					</picker>
				</view>
			</view>

		</view>
		<view class="cart_bottom" @click="save">
			<view class="submitbtn">提交</view>
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				array: ['保密', '男', '女'],
				index: 0,
				imageStyles: {
					width: 90,
					height: 90,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				nickname: "",
				date: "",
				avatar: "",
				avatar2: ""

			}
		},
		onLoad() {
			var $this = this
			API.post("user/getUser").then((res) => {
				if (res.code == 1) {
					$this.nickname = res.data.nickname
					$this.date = res.data.birthday
					if (res.data.sex == "男") {
						$this.index = 1
					} else if (res.data.sex == "女") {
						$this.index = 2
					} else {
						$this.index = 0
					}
					$this.avatar = res.data.avatar ? res.data.avatar : '/static/images/userimg.jpg'
					$this.avatar2 = res.data.avatarurl
				}
			})
		},
		methods: {
			inickname(e) {
				this.nickname = e.detail.value
			},
			save() {
				var json = {
					nickname: this.nickname,
					sex: this.array[this.index],
					birthday: this.date,
					avatar: this.avatar2
				}
				var $this = this
				API.post("common/iinfo", json).then((res) => {
					if (res.code == 1) {
						API.showModal(res.msg, "/pages/user/user")
					} else {
						API.showToast(res.msg)
					}
				})
			},
			select(e) {
				var $this = this
				const tempFilePaths = e.tempFilePaths;
				var sessionid = uni.getStorageSync('sessionid');
				uni.uploadFile({
					url: API.getApiUrl() + 'common/upload',
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						'sessionid': sessionid,
						'token': API.apikey
					},
					formData: {

					},
					success: res => {
						var json = JSON.parse(res.data)
						if (json.code == 1) {
							console.log(json.data.url)
							$this.avatar2 = json.data.url
						}

					}

				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.ttitle {
		font-size: 60rpx;
		font-weight: bold;
		line-height: 90rpx;
		padding: 30rpx 30rpx 0;
	}

	.ttxt {
		padding: 10rpx 30rpx;
		color: #666;
	}

	.form {
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0;
	}

	.form_dl {
		width: 100%;
		overflow: hidden;
		display: flex;
		border-bottom: 2rpx solid #f5f5f5;
		line-height: 100rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	.form_dl:last-child {
		border-bottom-width: 0;
	}

	.form_dt {
		width: 170rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.form_dd {
		flex: 1;
		font-size: 30rpx;
	}

	.inp {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border: 0 none;
		margin: 0;
		font-size: 30rpx;
		text-align: left;
	}

	.form_dd .picker text {
		margin: 38rpx -6rpx 0 12rpx;
		width: 0;
		height: 0;
		border: 12rpx solid;
		border-color: transparent transparent transparent #9E9E9E;
		position: relative;
		float: right;
	}

	.form_dd .picker text::after {
		content: '';
		position: absolute;
		top: -12rpx;
		left: -14rpx;
		border: 12rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.cart_bottom {
		padding: 60rpx 10%;
		box-sizing: border-box;
	}

	.submitbtn {
		width: 100%;
		background: $color;
		color: #fff;
		font-size: 36rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 96rpx;
		text-align: center;
		font-weight: bold;
	}

	.userimgbox {
		width: 90px;
		position: relative;
		margin: 0 auto;
		padding: 40rpx 0 20rpx;
	}

	.userimg image {
		width: 90px;
		height: 90px;
		border-radius: 90px;
	}
</style>